<template>
  <div class="auth">
    <activate-header></activate-header>

    <van-form class="region form" @submit="onSubmit" ref="formRef">
      <van-cell-group inset>
        <van-field
          class="vertical-label"
          v-model="formData.name"
          name="name"
          label="姓名"
          placeholder="请输入姓名"
          required
          clearable
          :rules="[
            { required: true, message: '请输入姓名或上传身份证自动识别' },
          ]"
        >
          <template #button>
            <van-image :src="cameraIcon" @click="goAuthCard"></van-image>
          </template>
        </van-field>
        <van-field
          class="vertical-label"
          v-model="formData.idCard"
          name="idCard"
          label="身份证号"
          placeholder="请输入身份证号"
          required
          clearable
          :rules="[
            { required: true, message: '请输入身份证号或上传身份证自动识别' },
          ]"
        ></van-field>
      </van-cell-group>
    </van-form>
    <div class="footer">
      <div class="tip-text">提示：点击摄像头图标上传身份证图片自动识别</div>
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        @click="onSubmit"
        color="#FD2F70"
        class="footer-btn"
        >下一步</van-button
      >
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useUserStroe } from "@/pinia/modules/main";
import activateHeader from "./modules/activateHeader.vue";
import cameraIcon from "@/assets/camera-icon.png";
import { submitInfo, getBlackList, getAuthRisk } from "@/api/authentication";
import { showToast, showLoadingToast, closeToast } from "vant";
import { useRouter, useRoute } from "vue-router";

const formRef = ref();
const router = useRouter();
const userStore = useUserStroe();
console.log("token: ", userStore.token);
console.log("userInfo: ", userStore.userInfo);
let phone = userStore.userInfo.phone;

const formData = reactive({
  //test
  // name: "冯剑威",
  // idCard: "15252719940613511X",
  //
  name: "",
  idCard: "",
  endDate: "",
});

const goAuthCard = () => {
  showToast("该功能未完善！");
  // router.push("/authCamera");
};

const onSubmit = async () => {
  formRef.value
    .validate()
    .then(async () => {
      try {
        console.log(formData);
        showLoadingToast({
          message: "加载中...",
          forbidClick: true,
        });
        const res = await submitInfo(formData);
        console.log(res);
        if (res.code == 200) {
          let paramsBlack = {
            name: formData.name,
            idCard: formData.idCard,
          };
          let paramsAuth = {
            name: formData.name,
            idNo: formData.idCard,
            mobile: phone,
            id_card: formData.idCard,
          };
          const resBlack = await getBlackList(paramsBlack);
          console.log("resBlack", resBlack);
          if (resBlack.code == 200) {
            const resAuth = await getAuthRisk({
              dataJson: JSON.stringify(paramsAuth),
            });
            console.log("resAuth", resAuth);
            if (resAuth.code == 200) {
              // 路由跳转
              // router.push('/')
            } else {
              // showToast('')
            }
          } else {
          }
        } else {
          showToast("名字或身份号填写错误，请核对!");
          return;
        }
        closeToast();
        router.push("/guide");
      } catch (error) {
        console.log("onSubmit: ", error);
      } finally {
      }
    })
    .catch(() => {});
};
</script>
<style lang="scss" scoped>
.auth {
  min-height: 100vh;
  background-color: #f6f6f6;
  // padding: 0 20px;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  .region {
    // margin-top: 10px;
    margin: 10px 18px;
    background-color: #fff;
    border-radius: 12px;
  }
  .title {
    // align-self: flex-start;
    line-height: 1.5;
    font-size: 16px;
    font-weight: 500;
  }
  .card {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .item + .item {
      margin-top: 18px;
    }
    &-tip {
      line-height: 1.5;
      color: #999;
      font-size: 12px;
    }
  }
  .form {
    margin-bottom: 10px;
    .vertical-label {
      display: block;
      .van-field__label {
        margin-bottom: 8px;
      }
      // margin-bottom: 8px;
    }
  }
  .footer {
    margin: 0 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    .tip-text {
      margin-top: 10px;
      flex: 1;
      color: $text-color-grey;
      font-size: 12px;
    }
    &-btn {
      margin-bottom: 20px;
    }
  }
}
</style>
